/**
 * #info
 *@author   wuwg
 *@createTime    2018/03/20
 *@updateTime    2018/05/04
 *@description   steps-item  component 步骤条目组件
 */
import config from '../../../../config/config.js'

// mixins
import Emitter from '../../../../mixins/emitter.js'
// prefix
const prefixCls = config.prefix + '-steps'
const iconPrefixCls = config.prefix + '-icon'
/**
 * #item
 *
 * @type aty-steps-item
 * @cn   步骤条目
 * @nameprop title
 * @order 100
 */
export default {
  name: config.prefix + '-steps-item',
  mixins: [Emitter],
  props: {
    /**
     * #property
     *
     * @name title
     * @cn   标题
     * @type string
     * @description 步骤条目的标题
     */
    title: {
      type: String,
      default: ''
    },
    /**
     * #property
     *
     * @name content
     * @cn 步骤描述
     * @type string
     * @description 步骤的详细描述，可选
     */
    content: {
      type: String
    },
    /**
     * #property
     *
     * @name icon
     * @cn 图标
     * @type icon
     * @description 步骤的图标，可选
     */
    icon: {
      type: String
    },
    /**
     * #property
     *
     * @name  status
     * @cn    步骤的状态
     * @type  list
     * @options  [wait,process,finish,error]
     * @description 步骤的状态，可选值为[wait,process,finish,error]中的一个，不设置时自动判断
     */
    status: {
      validator (value) {
        return Artery.isOneOf(value, ['wait', 'process', 'finish', 'error'])
      }
    }
  },
  data () {
    return {
      prefixCls: prefixCls,
      stepNumber: '',
      nextError: false,
      total: 1,
      currentStatus: ''
    }
  },
  computed: {
    wrapClasses () {
      return [
                `${prefixCls}-item`,
                `${prefixCls}-status-${this.currentStatus}`,
                {
                  [`${prefixCls}-custom`]: !!this.icon,
                  [`${prefixCls}-next-error`]: this.nextError
                }
      ]
    },
    iconClasses () {
      let icon = ''

      if (this.icon) {
        icon = this.icon
      } else {
        if (this.currentStatus == 'finish') {
          icon = 'ios-checkmark-empty'
        } else if (this.currentStatus == 'error') {
          icon = 'ios-close-empty'
        }
      }

      return [
                `${prefixCls}-icon`,
                `${iconPrefixCls}`,
                {
                  [`${iconPrefixCls}-${icon}`]: icon != ''
                }
      ]
    },
    styles () {
      return {
        width: `${1 / this.total * 100}%`
      }
    }
  },
  watch: {
    status (val) {
      this.currentStatus = val
      if (this.currentStatus == 'error') {
        this.$parent.setNextError()
      }
    }
  },
  created () {
    this.currentStatus = this.status
  },
  mounted () {
    this.dispatch(prefixCls, 'append')
  },
  beforeDestroy () {
    this.dispatch(prefixCls, 'remove')
  }
}
